<template>
	<view class="container">

		<view class="resultsBox mb20">

			<view class="results-item f32 c333">
				<view class="left">
					<view class="name">未盘</view>
					<view class="number">{{total.inventory_num}}</view>
				</view>
				<view class="right">
					<view class="text">本次盘点数量</view>
					<view class="number">{{total.inventory_num}}</view>
				</view>
			</view>

		</view>

		<view class="resultsContent">
			<view class="results-li mb20" v-for="(item,index) in recordList" :key="index">
				<view class="dropInfo">
					<view class="left nowrap">
						<view class="pic">
							<dimg :src="item.cover"></dimg>
						</view>
						<view class="text nowrap">
							<view class="name f30 c333">{{item.title}}</view>
							<view class="stock">
								<view class="f28 c333">盘点库存 : {{add(item)}}</view>
								<view class="f28 c333">账面库存 : {{convertAdd(item)}}</view>
							</view>
						</view>
					</view>
					<view class="right nowrap tRight">
						<view class="arrow" @click="changeImg(index)">
							<image src="../../static/images/arrow_down.png" mode="aspectFit" v-show="!item.isok"></image>
							<image src="../../static/images/arrow_ondown.png" mode="aspectFit" v-show="item.isok"></image>
							
						</view>
					
					</view>

				</view>

				<view class="dropBox" v-show="item.isok">
					<view class="drop-item" >
						<view class="f28 c333">规格</view>
						<view class="f28 c333">盘点库存</view>
						<view class="f28 c333">账面库存</view>
					</view>
					<view class="drop-item" v-for="(i,subIndex) in item.product_list" :key="subIndex">
						<view class="f28 c666">
							<block v-for="(val,valIndex) in i.spec_data" :key="valIndex">
								{{ val }}
								<block v-if="valIndex < i.spec_data.length - 1">/</block>
							</block>
						</view>
						<view class="f28 c333">{{i.operate_num}}</view>
						<view class="f28 c333">{{i.convert_num}}</view>
					</view>
				</view>

			</view>
			
		
		</view>


	</view>
</template>

<script>
	export default{
		data(){
			return{
				showBox:false,
				list:'',
				id:'',
				userid:'',
				total:{},
				recordList:[],
				productList:[],
				inverTotal:'', //盘点库存
				bookTotal:''//账面库存
			  
			};
		},
		onLoad(option) {
			this.id = uni.getStorageSync('id');
			
			this.userid=option.userid,
			// this.list=[
			// 		{ 
			// 		  pic:'../../static/images/201916541220.jpg',
			// 		  name:'3542763(商品名称3542763(商品名称）',
			// 		  inventory:'7',
			// 		  book:'8',
			// 		  surplus:'15555'
			// 		}
			// 	],
				this.recordList.map((item,index)=>{
					console.log(index)
					this.recordList[index].isok=false
				})
				this.getRecord()
			
		
		},
		methods:{
	
		
		getRecord(){
		   let that=this;
		   that.$ajax('api/v1.inventory/user',{
			   inventory_id:that.id,
			   user_id:that.userid,
			   page_size:100
		   }).then(res=>{
			   if(res.code==1){
				   
				   that.total=res.result.total
				   that.recordList=res.result.page_list
				   that.recordList.forEach(item=>{
					   item.isok=false
				   })
				   
				 console.log(this.recordList);
				 let c=0
	
			
			   }
		   }).catch(res=>{
			   that.$sToast(res.message)
		   })
		},
		
		changeImg(index) {
			let list=this.recordList
			list[index].isok = !list[index].isok
			this.recordList=list
			this.$set(this.recordList,index,list[index])
		},
		add(item){
			let total=0
			item.product_list.forEach(item=>{
				total=+item.operate_num+total
			})
			return total
		},
		convertAdd(item){
			let convert=0
			item.product_list.forEach(item=>{
				convert=+item.convert_num+convert
			})
			return convert
		}
		
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F4F8;
	}

	.resultsBox {
		.results-item {
			background-color: $white-background;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 30upx;
			border-bottom: 2upx #eee solid;
			text-align: center;

	
		}
	}

	.resultsContent {
		.results-li {
			.dropInfo {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
	     	padding: 40upx 30upx;
			background-color: $white-background;
				.left {
					width: 60%;
					display: flex;
					flex-direction: row;

					.pic {
						image {
							width: 130upx;
							height: 130upx;
							margin-right: 30upx;
						}
					}

					.text {
						.name {
							padding-bottom: 18upx;
						}

						.stock {
							view {
								&:first-child {
									padding-bottom: 6upx;
								}
							}
						}
					}
				}

				.right {
					width: 40%;
					padding-top: 20upx;

					.arrow {
						margin-bottom: 55upx;
						display: flex;
						justify-content: flex-end;

						image {
							width: 25upx;
							height: 15upx;
						}
					}

					.surplus {
						color: #249AF6;
					}
				}

			}

			.dropBox {
				.drop-item {		
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					background-color: #eee;
					border-bottom: 2upx #ddd solid;
					padding: 30upx 0;
					&:last-child{
						border-bottom: none;
					}
					view{
						width: 25%;
						text-align: center;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}


</style>
